<template>
    <div class="right-wrapper content-myTest page-mytest">
        <div class="page-titles">
            <div class="col-md-5">
                <h3 class="text-themecolor">我的练习</h3>
            </div>
        </div>

        <div class="container-fluid">
			<div class="rows">

				<div class="col-md-12">
					<div class="card">
						<div class="card-body">
							<ul class="nav nav-tabs customtab" role="tablist">
                                <li class="nav-item">
                                	<a class="nav-link" :class="['active'][activeTab]" data-toggle="tab" role="tab" aria-expanded="true" @click="list(0,0)" href="javascript:void(0)">
                                		<span class="hidden-xs-down">未完成</span>
                                	</a>
                                </li>
                                <li class="nav-item">
                                	<a class="nav-link" :class="['','active'][activeTab]" data-toggle="tab"  role="tab" aria-expanded="false" @click="list(1,1)" href="javascript:void(0)">
                                		<span class="hidden-xs-down">已完成</span>
                                	</a>
                                </li>
                                <li class="nav-item">
                                	<a class="nav-link" :class="['','','active'][activeTab]" data-toggle="tab" role="tab" @click="listCollect(2)" href="javascript:void(0)">
                                		<span class="hidden-xs-down">收藏</span>
                                	</a>
                                </li>
                                <!--<li class="nav-item">-->
                                    <!--<a class="nav-link" data-toggle="tab" role="tab">-->
                                        <!--<span class="hidden-xs-down">错题</span>-->
                                    <!--</a>-->
                                <!--</li>-->
                                <li class="nav-item">
                                    <a class="nav-link" data-toggle="tab" role="tab">
                                        <span class="hidden-xs-down">能力评估</span>
                                    </a>
                                </li>
                            </ul>
                            <div class="tab-content">

                                <div class="tab-pane active" id="home2" role="tabpanel" aria-expanded="true">
                                    <el-table
                                        :data="tableData"
                                        border
                                        style="width: 100%">
                                        <el-table-column
                                            prop="title"
                                            label="练习题型"
                                            width="320">
                                            <template slot-scope="scope">
                                                {{scope.row.title}}
                                            </template>
                                        </el-table-column>
                                        <el-table-column
                                            prop="created_time"
                                            label="测试开始时间"
                                            width="250">
                                        </el-table-column>
                                        <el-table-column label="操作">
                                            <template slot-scope="scope">
                                                <div class="button-group">
                                                    <span type="success" v-if="scope.row.simu_type==0 && activeTab == 0"><a class="btn btn-sm btn-rounded btn-outline-info" size="small" target="_blank" :href="'#/quicktest-' + scope.row.id">继续练习</a></span>
                                                    <span type="success" v-if="scope.row.simu_type==1 && activeTab == 0"><a class="btn btn-sm btn-rounded btn-outline-info" size="small" target="_blank" :href="'#/realtest-' + scope.row.id">继续练习</a></span>
                                                    <span type="success" v-if="scope.row.simu_type==2 && activeTab == 0"><a class="btn btn-sm btn-rounded btn-outline-info" size="small" target="_blank" :href="'#/zxtest-' + scope.row.id">继续练习</a></span>
                                                    <span type="success" v-if="scope.row.simu_type==3 && activeTab == 0"><a class="btn btn-sm btn-rounded btn-outline-info" size="small" target="_blank" :href="'#/comptest-' + scope.row.id">继续练习</a></span>
                                                    <a href="#" v-if="activeTab == 0" class="btn btn-sm btn-rounded btn-outline-danger" type="danger" icon="delete" size="small">删除</a>
                                                    <a target="_blank" class="btn btn-sm btn-rounded btn-outline-success" type="info" icon="edit" size="small" :href="'#/quicktestreport-'+scope.row.id" v-if="scope.row.simu_type==0">查看练习报告</a>
                                                    <a target="_blank" class="btn btn-sm btn-rounded btn-outline-success" type="info" icon="edit" size="small" :href="'#/realtestreport-'+scope.row.id" v-if="scope.row.simu_type==1">查看练习报告</a>
                                                    <a target="_blank" class="btn btn-sm btn-rounded btn-outline-success" type="info" icon="edit" size="small" :href="'#/zxtestreport-'+scope.row.id" v-if="scope.row.simu_type==2">查看练习报告</a>
                                                    <a target="_blank" class="btn btn-sm btn-rounded btn-outline-success" type="info" icon="edit" size="small" :href="'#/comptestreport-'+scope.row.id" v-if="scope.row.simu_type==3">查看练习报告</a>
                                                </div>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                    <el-row>
                                        <el-col :span="10">&nbsp;</el-col>
                                        <el-col :span="12">
                                            <el-pagination
                                                @current-change="pagination.pagechange"
                                                :current-page="pagination.current"
                                                :page-sizes="[20, 50, 100, 500]"
                                                :page-size="20"
                                                layout="total, prev, pager, next, jumper"
                                                :total="pagination.total">
                                            </el-pagination>
                                        </el-col>
                                    </el-row>

                                </div>
                                <div class="tab-pane p-20" id="profile2" role="tabpanel" aria-expanded="false">2</div>
                                <div class="tab-pane p-20" id="messages2" role="tabpanel">3</div>
                            </div>
						</div>
					</div>
				</div>
			</div>
		</div>
    </div>
</template>
<script>
    import http from "../../lib/http"
    export default {
        data : function(){
            var self = this
            return {
                activeTab : 0,
              tableData : [],
              pagination : {
                  current : 1,
                  total : 0,
                  size : 20,
                  pagechange : function(val){
                    self.pagination.current = val
                    self.list()
                  }
              }
            }
        },
        created : function(){
            this.list(0,0)
        },
        methods : {
            setTab : function(tab){
                this.activeTab = tab
            },
            listCollect : function (tab) {
                this.setTab(tab)
            },
            list: function (is_done,tab) {
                this.setTab(tab)
                var self = this
                var params = {
                    skip: (this.pagination.current - 1) * this.pagination.size,
                    limit: this.pagination.size,
                    is_done : is_done
                }
                http.get(this, "cs_test_libraries_mylist", params).then(function (res) {
                    //console.log(self.data.total)
                    self.pagination.total = res.data.total * 1
                    self.tableData = res.data.data
                })
            }
        }
    }
</script>
